<template>
  <div class="content">
    <h2>使用reactive</h2>
    <form>
      账户: <input type="text" v-model="account.userName">
      密码: <input type="password" v-model="account.password">
    </form>

    <h2>使用ref</h2>
    <form>
      账户: <input type="text" v-model="userName">
      密码: <input type="password" v-model="password">
    </form>

    <hr>
    <ShowInfo name="why" :age="18"></ShowInfo>
  </div>
</template>

<script>
  import { ref, reactive } from 'vue'
  import ShowInfo from './ShowInfo.vue'

  export default {
    components: {
      ShowInfo
    },
    data() {
      return {
        message: "Hello World"
      }
    },
    setup(){
      // 定义响应式数据reactive/ref
      // ref也可以定义复杂数据类型
      const info = ref("why")

      console.log(info.value)
      // 1. reactive的常用应用场景
      // 1.1 条件一: reactive应用于本地数据
      // 1.2 条件二: 多个数据之间是有联系的
      const account = reactive({
        userName: "why",
        password: "123456",
        token: "why123456"
        // productList: [] 商品列表在这里刹出现就会很突兀
      })
      // 复杂数据类型使用ref会使得数据比较分散
      const userName = ref("why")
      const password = ref("123456")
      // 2. ref的常用应用场景
      // 2.1 定义本地的一些简单数据
      const message = ref("hello world")
      const counter = ref(100)
      // 2.2 定义从网络中获取的数据
      // const musics = reactive([])
      const music = ref([])
      // onMounted(() => {
      //   const serverMusic = ["海阔天空", "光辉岁月", "七里香"]
      //   music.value = serverMusic
      // })

      return {
        info,
        account,
        userName,
        password
      }
    }
  }
</script>

<style scoped>
</style>